
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
</head>
<body>

<form class="form-horizontal" style="margin-top: 50px;">
    <div class="form-group">
        <label for="title" class="col-sm-2 control-label">商品标题</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" style="width: 80%" id="title" placeholder="请输入商品标题">
        </div>
    </div>
    <div class="form-group">
        <label for="price" class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-10">
            <input type="number" class="form-control" style="width: 80%" id="price" placeholder="请输入商品价格">
        </div>
    </div>
    <div class="form-group">
        <label for="desc" class="col-sm-2 control-label">商品描述</label>
        <div class="col-sm-10">
            <textarea class="form-control" style="width: 80%" id="desc" placeholder="请输入商品描述"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="file" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-10">
            <input type="file" style="width: 80%" class="form-control" id="file" onchange="uploadImg()">
        </div>
        <img src="" id="myimg" style="width: 100px;">
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" onclick="addGoods()">添加商品</button>
        </div>
    </div>
</form>

</body>
<script>
    let uploadedImageUrl = ''; // 添加全局变量存储图片URL

    function addGoods(){
        let title=document.getElementById("title").value;
        let price=document.getElementById("price").value;
        let desc=document.getElementById("desc").value;
        let img=uploadedImageUrl; // 使用全局变量
        console.log("src",img)

        if(!img) {
            alert("请先上传商品图片");
            return;
        }

        $.ajax({
            url:"addGoods",
            type:"post",
            data:{
                title:title,
                price:price,
                desc:desc,
                img:img,
                mid:1
            },
            success:function (res) {
                console.log("返回值:", res);
                if(res==="Success"){
                    alert("添加成功");
                }else{
                    alert("添加失败");

                }
            }
        })
    }

    function uploadImg(){
        const client = new OSS({
            // yourRegion填写Bucket所在地域。以华东1（杭州）为例，yourRegion填写为oss-cn-hangzhou。
            region: "oss-cn-shanghai",
            authorizationV4: true,
            // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
            accessKeyId: "LTAI5tQHii4x32uMdpZdv88C",
            accessKeySecret: "oUDplW7V1XIFGlw7ia4gLD8Z7SnCmT",
            // 从STS服务获取的安全令牌（SecurityToken）。
            // stsToken: "yourSecurityToken",
            // 填写Bucket名称。
            bucket: "cz22",
        });

        const data = file.files[0];
        putObject(data);

        async function putObject(data) {
            try {
                // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
                // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
                // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
                const options = {
                    meta: { temp: "demo" },
                    mime: "json",
                    headers: { "Content-Type": "text ain" },
                };
                let img_date = document.getElementById("file").value
                const result = await client.put(img_date, data, options);
                console.log(result);
                document.getElementById("myimg").src = result.url
            } catch (e) {
                console.log(e);
            }

        }
    }



</script>
</html>